<template>
    <el-dialog v-model="showDialog" modal-class="add-folder-modal" @closed="handlerCancel" width="600px" center close-on-click-modal>
      <div class="steps" v-if="type !== 'customer'">
        <div class="step" :class="{'active': step === 1}">客户</div>
        <div class="step" :class="{'active': step === 2}">询盘/订单</div>
      </div>
      <el-form v-model="inquiryForm" label-width="120px" v-if="step === 2">
        <el-form-item label="产品名称">
          <el-input v-model="inquiryForm.productName" />
        </el-form-item>
        <el-form-item label="产品编号">
          <el-input v-model="inquiryForm.productCode" />
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="inquiryForm.num" />
        </el-form-item>
        <el-form-item label="交期">
          <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" v-model="inquiryForm.deliveryTime" type="datetime" />
        </el-form-item>
        <el-form-item label="其他信息">
          <el-input v-model="inquiryForm.otherInfo" />
        </el-form-item>
      </el-form>
      <el-form v-loading="loading" element-loading-svg-view-box="0, 0, 1024, 1024" :element-loading-svg="LoadingSvg" v-model="customerForm" label-width="120px" v-if="step === 1">
        <el-form-item label="邮箱">
          <el-input v-model="customerForm.email" />
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="customerForm.name" />
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input v-model="customerForm.company" />
        </el-form-item>
        <el-form-item label="ASI编号">
          <el-input v-model="customerForm.asi" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="customerForm.phoneNumber" />
        </el-form-item>
        <el-form-item label="官网">
          <el-input v-model="customerForm.webUrl" />
        </el-form-item>
      </el-form>
      <template #footer>
          <div class="dialog-footer">
          <el-button size="small" @click="handlerCancel">取消</el-button>
          <el-button size="small" type="primary" @click="handlerSave">
              保存
          </el-button>
          </div>
      </template>
    </el-dialog>
  </template>
    
  <script lang="ts" setup>
  import { defineProps, ref, onMounted} from 'vue';
  import { ElMessage } from 'element-plus';
  import api from '/@/api/email/index';
  import { useEmail } from '/@/stores/email';
  import pinia from '/@/stores';
  import { LoadingSvg } from '/@/utils/loading';

  const props = defineProps({
    type: {
      type: String,
      default: ''
    },
    inquiryInfo: {
      type: Object,
      default: {}
    },
    emailId: {
      type: String,
      default: ''
    }
  });

  const showDialog = ref(false);
  const inquiryForm = ref<any>(props.inquiryInfo);
  const stores = useEmail(pinia);
  const customerForm = ref<any>({
    emailAccount: stores.curAccount
  });
  const step = ref(1);
  const emit = defineEmits(['close']);
  const loading = ref(false);

  const handlerCancel = () => {
    emit('close');
  };

  const saveCustomer = async () => {
    const saveFun = customerForm.value.id ? api.client.updateClient : api.client.addClient;
    const res = await saveFun(customerForm.value);
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '操作成功' });
      if (props.type !== 'customer') {
        inquiryForm.value.clientId = customerForm.value.id || res.data;
      }
    }
  };
  
  const handlerSave = async () => {
    if (step.value === 1) {
      await saveCustomer();
      if (props.type === 'customer') {
        emit('close');
      } else {
        step.value = 2;
      }
    } else {
      const saveFun = inquiryForm.value.id ? api.inquiry.updateInquiry : api.inquiry.addInquiry;
      const res = await saveFun(inquiryForm.value);
      if (res.code === 200) {
        ElMessage({ type: 'success', message: '操作成功' });
        emit('close');
      }
    }
  };

  const init = async () => {
    const params = {
      account: stores.curAccount,
      emailId: props.emailId
    };
    loading.value = true;
    let res;
    try {
      res = await api.client.getClientInfo(params);  
    } catch {}
    loading.value = false;
    
    if (res && res.code === 200) {
      if (res.data) {
        const { isExist, aiRes } = res.data;
        let data: any;
        if (isExist) {
          data = isExist;
        } else {
          data = {
            emailAccount: stores.curAccount
          };
        }
        Object.assign(data, aiRes || {});
        customerForm.value = data;
      }
    }
  };
  
  defineExpose({
    showDialog,
    init
  })
  </script>
  <style lang="scss" scoped>
  .steps {
    display: flex;
    background: #f5f7fa;
    padding: 10px 40px;
    width: 300px;
    margin: auto;
    margin-bottom: 20px;
  }

  .step {
    width: 100px;
    &.active {
      color: #409eff;
    }
  }
  </style>
    